<template>
	<div class="header">
		<ul>
			<li class="new">新增用户：<CountTo :startVal='0' :endVal='238' :duration='4000'></CountTo></li>
			<li class="total">用户总计：<CountTo :startVal='0' :endVal='5017' :duration='4000'></CountTo></li>
			<li class="huoyue">活跃用户：<CountTo :startVal='0' :endVal='2027' :duration='4000'></CountTo></li>
		</ul>
	</div>
	<div>
		<button @click="update">升级</button>
	</div>
	<!-- <bar-graph></bar-graph> -->
	<div>
		<button @click="openNewdialog">打开新窗口</button>
	</div>
	
	<div>
		<button @click="luping">录屏功能</button>  <br>
		<button @click="stoprecord">结束录屏</button>
	</div>
	
	<div class="plug">
		<p class="zhezhao" @click="downloadplug('')">
			下载
			<el-progress width="40" v-if="showjindu" type="circle" :percentage="jindunum" />
		</p>
		<Icon class="wx-zip" size="60"></Icon>
	</div>
</template>

<script setup lang="ts">
	import {ref} from 'vue'
	import BarGraph from "@/components/BarGraph/BarGraph.vue";
	import { CountTo } from 'vue3-count-to';
	import screenCapApi from '../../utils/recordScreen';
	let isnotAllfullscreen = ref(true)
	let jindunum = ref(85)
	let showjindu = ref(false)
	let maximizeboolen = ref(false);
	let isrecordbegin = ref(false)
	const update =()=>{
		window.wxWindow.update()
	}
	
	const downloadplug = (url)=>{
		showjindu.value=true;
		window.wxWindow.download(url)
	}
	
	const togglefullscreen = () => {
		isnotAllfullscreen.value = !isnotAllfullscreen.value;
		if (!document.fullscreenElement) {
			enterFullScreen();
		} else {
			exitFullScreen();
		}
	}
	
	const enterFullScreen = () => {
		let element = document.documentElement;
		element.requestFullscreen();
	}
	
	const exitFullScreen = () => {
		document.exitFullscreen();
	}
	
	const openNewdialog = () => {
		window.wxWindow.createWin({
			url: 'assembly/iconfont', // 打开新窗口要加载的那个路由路径
			width: 600,
			height: 600
		})
	}
	
	const luping = () => {
		screenCapApi.startRecord();
		alert("正在录屏，点击结束录屏保存录屏文件")
	}
	
	const stoprecord = () => {
		screenCapApi.stopRecord();
	}
	// 右键菜单
	document.addEventListener('contextmenu', function (event) {
		event.preventDefault();
		window.wxWindow.showmenu(isnotAllfullscreen.value);
	});
	
	// 监听来自主进程的消息事件
	window.wxWindow.receiveMessageFromMain((message) => {
		console.log(message)
		if(message.state=="completed"){
			console.log("11111111")
			showjindu.value=false;
		}
		if (message.status) {
			if(message.status == 'maximize'){
				maximizeboolen.value = true
			}else{
				maximizeboolen.value = false;
			}
			if (message.status == 'recordScreen') {
				isrecordbegin.value=true;
			}
			if(message.status == 'fullScreen'){
				togglefullscreen()
			}
			
		}
	});
</script>

<style scoped>
	.header{
		margin:20px 0;
	}
	ul{
		list-style: none;
		display: flex;
		justify-content: space-around;
	}
	
	ul li{
		display: inline-block;
		width: 30%;
		text-align: center;
		height: 80px;
		line-height: 80px;
		color:#fff;
	}
	li.new{
		background: #749;
	}
	li.total{
		background: #911;
	}
	li.huoyue{
		background: #985;
	}
	li>span{
		font-weight: bold;
	}
	a{
		text-decoration: none;
	}
	.plug{
		display: block;
		cursor: pointer;
		width: 60px;
		    height: 60px;
		position: relative;
	}
	.zhezhao{
		position: absolute;
		width: 100%;
		height: 100%;
		background: #00000099;
	}
</style>